<script setup lang="ts">
defineOptions({
  name: "energyBord"
});
import { markRaw, ref, computed, onMounted, nextTick } from "vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import consume_all from "@/assets/svg/energy/consume_all.svg?component";
import consume_fab from "@/assets/svg/energy/consume_fab.svg?component";
import consume_fp from "@/assets/svg/energy/consume_fp.svg?component";
import consume_life from "@/assets/svg/energy/consume_life.svg?component";
import elec_co2 from "@/assets/svg/energy/elec_co2.svg?component";
import elec_mei from "@/assets/svg/energy/elec_mei.svg?component";
import elec_money from "@/assets/svg/energy/elec_money.svg?component";
import elec_used from "@/assets/svg/energy/elec_used.svg?component";
import icon_electricity from "@/assets/svg/energy/icon_electricity.svg?component";
import icon_water from "@/assets/svg/energy/icon_water.svg?component";
import icon_hot_water from "@/assets/svg/energy/icon_hot_water.svg?component";
import icon_diesel from "@/assets/svg/energy/icon_diesel.svg?component";
import icon_gas from "@/assets/svg/energy/icon_gas.svg?component";
import icon_ng from "@/assets/svg/energy/icon_ng.svg?component";
import icon_cost from "@/assets/svg/energy/icon_cost.svg?component";
import icon_cda from "@/assets/svg/energy/icon_cda.svg?component";
import icon_steam from "@/assets/svg/energy/icon_steam.svg?component";
import icon_n2 from "@/assets/svg/energy/icon_n2.svg?component";
import icon_h2 from "@/assets/svg/energy/icon_h2.svg?component";
import icon_o2 from "@/assets/svg/energy/icon_o2.svg?component";
import icon_ar from "@/assets/svg/energy/icon_ar.svg?component";
import icon_he from "@/assets/svg/energy/icon_he.svg?component";
import icon_co2 from "@/assets/svg/energy/icon_co2.svg?component";

const iconComList = {
  icon_electricity: markRaw(icon_electricity),
  icon_water: markRaw(icon_water),
  icon_diesel: markRaw(icon_diesel),
  icon_gas: markRaw(icon_gas),
  icon_ng: markRaw(icon_ng),
  icon_hot_water: markRaw(icon_hot_water),
  icon_cost: markRaw(icon_cost),
  icon_cda: markRaw(icon_cda),
  icon_steam: markRaw(icon_steam),
  icon_n2: markRaw(icon_n2),
  icon_h2: markRaw(icon_h2),
  icon_o2: markRaw(icon_o2),
  icon_ar: markRaw(icon_ar),
  icon_he: markRaw(icon_he),
  icon_co2: markRaw(icon_co2)
};

interface Props {
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  width?: number;
  /**  模块最低高度，默认 292px */
  height?: number;
  imageSize?: number;
  /**  数据列表 */
  actualDataList?: any[];
  predictDataList?: any[];
  /**  单位 */
  unit?: string;
  // 筛选条件是否为当前年
  isCurrentYear?: boolean;
}

interface Emits {
  (event: "request-data"): void;
}

const emits = defineEmits<Emits>();

const props = withDefaults(defineProps<Props>(), {
  width: 667,
  height: 167,
  imageSize: 100
});
const title_height = computed(() => (props.title ? "32px" : "0px"));
const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);
const currentYear = new Date().getFullYear();

onMounted(() => {
  emits("request-data");
});
</script>

<template>
  <div class="energy-desk-content">
    <div class="header">
      <modelTitle v-if="title" :title="title" class="header-title" />
      <div class="unit">单位：{{ unit }}</div>
    </div>
    <div v-if="predictDataList && predictDataList.length > 0" class="energy-desk-content-list mt-10">
      <div class="title">预测能耗趋势</div>
      <div v-for="(data, index) in predictDataList" :key="data.icon" class="content-item">
        <div class="content-item-left">
          <!-- <component :is="iconComList[data?.icon]" class="content-icon color-total" /> -->
          <div class="content-box">
            <div class="content-box-label">{{ data?.year }}年<span /></div>
            <div>
              <div class="content-box-data">
                <span class="data-text">{{ data?.yearCost || "--" }}</span>
                <div v-if="index + 1 < predictDataList.length" class="item-right">
                  <div class="item-title">
                    {{ data.radioName }}
                  </div>
                  <div class="item-number" :style="{ color: data.radioValue > 0 ? '#FF0000' : '#34D399' }">
                    {{ `${data.radioValue || "--"}%` }}
                    <px-icon v-if="data.radioValue > 0"><Top /></px-icon>
                    <px-icon v-if="data.radioValue < 0"><Bottom /></px-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="!isCurrentYear" class="content-item" />
    </div>
    <div v-if="actualDataList && actualDataList.length > 0" class="energy-desk-content-list mt-10">
      <div class="title">实际能耗趋势</div>
      <div v-for="(data, index) in actualDataList" :key="data.icon" class="content-item">
        <div class="content-item-left">
          <!-- <component :is="iconComList[data?.icon]" class="content-icon color-total" /> -->
          <div class="content-box">
            <div class="content-box-label">
              {{ data?.year }}年<span />
              <px-tooltip v-if="index === 2" placement="top" content="实际消耗数据统计不全时无法环比"
                ><px-icon style="margin-left: 10px" color="#3B82F6"><InfoCircle /></px-icon
              ></px-tooltip>
            </div>
            <div>
              <div class="content-box-data">
                <span class="data-text">{{ data?.yearCost || "--" }}</span>
                <div v-if="index + 1 < actualDataList.length" class="item-right">
                  <div class="item-title">
                    {{ data.radioName }}
                  </div>
                  <div class="item-number" :style="{ color: data.radioValue > 0 ? '#FF0000' : '#34D399' }">
                    {{ `${data.radioValue || "--"}%` }}
                    <px-icon v-if="data.radioValue > 0"><Top /></px-icon>
                    <px-icon v-if="data.radioValue < 0"><Bottom /></px-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-item" />
    </div>
    <px-empty v-else />
  </div>
</template>

<style lang="scss" scoped>
$colorDone: #00b36d;
$colorTotal: var(--px-color-primary);

.energy-desk-content {
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  width: 100%;
  min-width: v-bind(min_width);
  height: 100%;
  min-height: v-bind(min_height);
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;

  :deep(.px-empty .px-empty__image) {
    display: none !important;
  }
  .header {
    display: flex;
    align-items: center;
    .header-title {
      width: 200px;
      background-size: 100%;
    }
    .unit {
      margin-left: 10px;
    }
  }
  .energy-desk-content-list {
    display: flex;
    flex-flow: row nowrap;

    .title {
      display: flex;
      align-items: center;
      min-width: 100px;
      margin-right: 20px;
    }

    .content-item {
      display: flex;
      // flex: 1;
      align-items: center;
      width: 25%;

      .content-item-left {
        display: flex;
        gap: 16px;

        .color-done {
          color: $colorDone;
        }

        .color-total {
          color: $colorTotal;
        }

        .content-icon {
          width: 44px;
          height: 44px;
        }

        .data-text {
          font-size: 22px;
          font-weight: 600;
          line-height: 1;
          white-space: nowrap;
        }

        .content-box {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .content-box-label {
            font-weight: 600;
            line-height: 1;
            color: #555;
            white-space: nowrap;
          }

          .content-box-data {
            display: flex;
            align-items: center;
          }
        }
      }

      .item-right {
        display: flex;
        align-items: center;
        .item-title {
          white-space: nowrap;
          margin: 0 10px;
        }

        .item-number {
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
